<template>
  <div>
    <div
      v-if="surplusText==='electricity'"
      style="text-align: center;width: 38px"
    >
      <i class="fa fa-plug text-sm" />
    </div>
    <div
      v-else
      :class="[surplusClass1,surplusClass2]"
    >
      <div class="flex content-center justify-center">
        <span class="text-xs mt-0.5">{{ surplusText }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Surplus',
  props: {
    device: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      surplusClass1: '',
      surplusClass2: '',
      surplusText: ''
    }
  },
  watch: {
    device: {
      deep: true,
      handler(val) {
        this.show()
      }
    }
  },
  created() {
    this.show()
  },
  methods: {
    show() {
      if (!this.device.deviceCore) {
        return
      }
      if (this.device.powerType === 'electricity') {
        this.surplusText = 'electricity'
        return
      }
      if (this.device.status === 'ONLINE' && this.device.charging) {
        this.surplusText = this.device.surplus + '%'
        this.surplusClass1 = 'battery-charging'
        this.surplusClass2 = ''
      } else {
        this.surplusText = this.device.surplus + '%'
        this.surplusClass1 = 'battery-icon'
        if (this.device.surplus > 90) {
          this.surplusClass2 = 'battery-100'
        } else if (this.device.surplus > 60) {
          this.surplusClass2 = 'battery-75'
        } else if (this.device.surplus > 40) {
          this.surplusClass2 = 'battery-50'
        } else if (this.device.surplus > 20) {
          this.surplusClass2 = 'battery-25'
        } else if (this.device.surplus > 5) {
          this.surplusClass2 = 'battery-10'
        } else {
          this.surplusClass2 = 'battery-1'
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
  @import '@/styles/element-variables.scss';

  .battery-charging {
    height: 22px;
    width: 38px;
    border-radius: 3px;
    position: relative;
    border-style:solid;
    border-width:1px;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.22));
    border-color: #606266;
    background: #FFF;

    &::before {
      content: "";
      width: 2px;
      position: absolute;
      top:4px;
      right: -3px;
      background: #606266;
      height: 12px;
    }

    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      animation: charging 8s linear infinite;
      z-index: -1;

    }
  }

  @keyframes charging {
    0% {
      background: #F56C6C;
      width: 0%;
    }

    50% {
      background: #e6a23c;
      width: 50%;
    }
    100% {
      background: #67c23a;
      width: 100%;
    }
  }

  /**
   电量
  */

  .battery-icon {
    height: 22px;
    width: 38px;
    border-radius: 3px;
    position: relative;
    border-style:solid;
    border-width:1px;
    border-color: #606266;
  }

  .battery-icon:after{
    content: "";
    width: 2px;
    position: absolute;
    top:3px;
    right: -3px;
    background: #1e1d1d;
    height: 12px;
  }
  .battery-100 {
    color: $--color-primary;
  }

  .battery-75 {
    color: #409EFF;
  }

  .battery-50 {
    color: #67C23A;
  }

  .battery-25 {
    color: #E6A23C;
  }

  .battery-10 {
    color: #909399;
  }

  .battery-1 {
    color: #F56C6C;
  }
</style>
